<template>  
    <el-row class="min-h-screen bg-gray-700 items-center justify-center">  
        <el-col class="flex items-center justify-center flex-col">  
            <div class="font-bold text-2xl text-light-700 mb-2">英语单词学习与测评</div>  
            <div class="font-bold text-2xl text-light-700 mb-4">后台管理</div>  
            
            <el-card class="bg-gray-500 p-4 shadow-lg rounded-lg" style="width: 380px;">  
                <el-col class="flex items-center justify-center flex-col">  
                    <el-form ref="formRef" :rules="rules" :model="form" class="w-full w-[280px]">  
                        <el-form-item prop="administrator_account" class="justify-center">  
                            <el-input v-model="form.administrator_account" placeholder="请输入用户名">  
                                <template #prefix>  
                                    <el-icon><User /></el-icon>  
                                </template>  
                            </el-input>   
                        </el-form-item>   

                        <el-form-item prop="administrator_password" class="justify-center mt-8">  
                            <el-input type="password" v-model="form.administrator_password" placeholder="请输入密码" show-password>  
                                <template #prefix>  
                                    <el-icon><Lock /></el-icon>  
                                </template>  
                            </el-input>  
                            
                        </el-form-item>  
                       

                        <el-form-item class="flex justify-between"> 
                            
                             <el-button round class="bg-teal-600 w-[90px] text-light-700 ml-7 mr-7"  @click="registerToLogin">注册</el-button>  
                              
                             <el-button round class="bg-teal-600 w-[90px] text-light-700 " @click="handleLogin">登录</el-button>  
                        </el-form-item>   
                    </el-form>  
                </el-col>   
            </el-card>  
        </el-col>  
    </el-row>  
</template>  

<script setup>  
import { reactive, ref } from 'vue';  
import { User, Lock } from '@element-plus/icons-vue';   
import { useRouter } from 'vue-router';   
import { login } from '@/api/manager';  
import { ElMessage } from 'element-plus';  

const router = useRouter();  
const formRef = ref(null);  

const form = reactive({  
    administrator_account: '',  
    administrator_password: ''   
});  

const rules = {  
    administrator_account: [{   
        required: true,  
        message: '用户名不能为空',  
        trigger: 'blur'   
    }],  
    administrator_password: [{   
        required: true,  
        message: '密码不能为空',  
        trigger: 'blur'   
    }]  
};  

const registerToLogin = () => {    
    ElMessage.info('正在前往注册页面');  
    router.push('register');   
};  


const handleLogin = async () => {
    try {
        await formRef.value.validate();
        
        const formData = new FormData();
        formData.append('administrator_account', form.administrator_account);
        formData.append('administrator_password', form.administrator_password);
        
        const res = await login(formData);
        
        if (res.data.code === '2000') {
            // 从响应头获取 Authorization token
            const token = res.headers?.authorization;
            if (token && token.startsWith('Bearer ')) {
                // 直接保存完整的 Bearer token
                localStorage.setItem('token', token);
            }
            
            // 保存用户信息
            localStorage.setItem('administrator_account', res.data.data.administrator_account);
            localStorage.setItem('administrator_name', res.data.data.administrator_name);
            
            ElMessage.success('登录成功');
            await router.push('/');
        } else {
            ElMessage.error(res.data.data || res.data.message);
        }
    } catch (error) {
        console.error('Error in handleLogin:', error);
        ElMessage.error(error.response?.data?.message || '登录失败');
    }
};


</script>
